<script setup lang="ts">
import { deleteArticleAPI, fetchChannelsAPI } from '@/apis/article'
import type {  ArticleListParams, channel, Article } from '@/types/article'
import { onMounted, ref, watch } from 'vue'
import { getArticleListAPI } from '@/apis/article'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Picture, Edit, Delete } from '@element-plus/icons-vue'


// 定义频道列表数据
const channelList = ref<channel[]>()

// 定义请求参数对象接口
// interface ReqParams {
//   channel_id?: number | null
//   status?: number | null // 添加 status 属性
//   page: number
//   begin_pubdate: string
//   end_pubdate: string
// }

//定义请求参数对象
const reqParams = ref<ArticleListParams>({
  channel_id: undefined,
  status: undefined, // 初始化 status 属性
  page: 1,
  begin_pubdate: '',
  end_pubdate: '',
})

// 定义获取频道列表的方法
const fetchChannels = async () => {
  const { data } = await fetchChannelsAPI()
  channelList.value = data.channels
}

// 定义日期范围变量
const dateArr = ref<string[]>([]) // 使用数组来存储日期范围

onMounted(() => {
  fetchChannels()
})


//总数文章
const totalCount = ref(0)
const articleList = ref<Article[]>([])
//获取文章列表
const getArticleList = async () => {
  const res = await getArticleListAPI(reqParams.value)
  articleList.value = res.data.results
  totalCount.value = res.data.total_count
  console.log(res)
  }

getArticleList()

//筛选文章
const filterArticles = () => {
  reqParams.value.page = 1
  getArticleList()
}

// 监听日期变化，收集后端所需的数据
watch(
  dateArr,
  (val) => {
    if (val) {
      reqParams.value.begin_pubdate = val[0]
      reqParams.value.end_pubdate = val[1]
    } else {
      reqParams.value.begin_pubdate = ''
      reqParams.value.end_pubdate = ''
    }
  },
  { deep: true },
)

// 删除文章
const deleteArticle = (id: string) => {
  ElMessageBox.confirm('是否确认删除该文章？', '⚠温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await deleteArticleAPI(id)
    getArticleList()
    ElMessage.success('删除成功')
  })
}

onMounted(() => {
  getArticleList()
  getArticleList()
})


</script>

<template>
  <!--结构 -->

  <div class="article-page">
    <!-- 筛选区域 -->
    <el-card>
      <div>
        <!-- 面包屑组件 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <!-- 表单组件 -->
      <el-form class="biaodan" label-width="80px">
        <el-form-item label="状态：">
          <el-radio-group v-model="reqParams.status">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="频道：">
          <el-select v-model="reqParams.channel_id" placeholder="请选择" label-width="50px">
            <el-option
              v-for="item in channelList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="有效日期" prop="cardEndDate">
          <el-date-picker
            v-model="dateArr"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>

        <el-form-item label="">
          <el-button @click="filterArticles()" type="primary">筛选</el-button>
        </el-form-item>
        {{ reqParams }}{{ dateArr }}
      </el-form>
    </el-card>

    <!-- 筛选结果区域 -->
    <el-card style="margin-top: 20px">
      <template v-slot:header>
        <div>根据筛选条件共查询到条结果：{{ totalCount }}</div>
      </template>

      <!-- 表格 -->
      <el-table :data="articleList">
        <el-table-column label="封面" prop="cover">
          <template #default="{ row }">
            <el-image :src="row.cover.images[0]" :preview-src-list="row.cover.images" :preview-teleported="true" lazy
              loading="lazy" :fit="'cover'" style="width: 100px; height: 100px">
              <template #error>
                <el-icon>
                  <Picture />
                </el-icon>
              </template>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="title"></el-table-column>
        <el-table-column label="状态" prop="status">
          <template #default="{ row }">
            <el-tag v-if="row.status === 0" type="info">草稿</el-tag>
            <el-tag v-else-if="row.status === 1">待审核</el-tag>
            <el-tag v-else-if="row.status === 2" type="success">审核通过</el-tag>
            <el-tag v-else-if="row.status === 3" type="danger">审核失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="发布时间" prop="pubdate"></el-table-column>
        <el-table-column label="阅读数" prop="read_count"></el-table-column>
        <el-table-column label="评论数" prop="comment_count"></el-table-column>
        <el-table-column label="点赞数" prop="like_count"></el-table-column>
        <el-table-column label="操作" prop="">
          <template #default="{ row }">
            <el-button type="primary" :icon="Edit" circle plain></el-button>
            <el-button type="danger" :icon="Delete" circle plain @click="deleteArticle(row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        :page-sizes="[100, 200, 300, 400]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      />
    </el-card>
  </div>
</template>

<style scoped>
/*样式*/
.biaodan {
  padding: 20px;
}
</style>
